<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Change #{eventBean.eventName} info</title>
        <h:outputStylesheet library="css" name="stylesheet.css" />
        <script>
            function myFunction() {
                var str = document.getElementById("modifyeventform:location").value;
                var patt = new RegExp("[\\w*[ ]*]*[,][\\w*[ ]*]*[,][\\w*[ ]*]*");
                if(patt.test(str)){
                    var parts = str.split(",");
                    var address = parts[0].split(" ").join("+");
                    var city = parts[1].split(" ").join("");
                    var state = parts[2].split(" ").join("");
                    var location = address+","+city+"+"+state;
                    document.getElementById("gmap").src = "https://www.google.com/maps/embed/v1/place?key=AIzaSyDDm0i7Jy_achXhFjVg8LcT1kbmi8wmdV4&amp;q="+location;
                    PF('gmap').show();
                }
                else{
                    window.alert("Location not found.");
                }
            }
            function loadingFunction() {
                console.log(document.getElementById("loadinggif").style);
                document.getElementById("loadinggif").style.visibility = "visible";
            }
        </script>
    </h:head>
    <h:body>
        <header>
            <h1 id="title">MeteoCal</h1>
            <h:form id="searchForm" class="float-left">
                <p:inputText value="#{searchBean.searchInput}" id="keyword" maxlength="200"/>
                <p:commandButton class="searchUsersButton" action="#{searchBean.findUser()}" icon="ui-icon-search"/>
                <p:watermark for="keyword" value="Search..." id="watermark" />
            </h:form>
            <ul id="landmarks">
                <li><p:link outcome="home" value="#{homeBean.name}'s Calendar"/></li>
                <li><p:link outcome="notifications" value="Notifications (#{notificationBean.getNumberOfNotifies()})"/></li>
                <li><p:link outcome="addressbook" value="Addressbook"/></li>
                <li><p:link outcome="settings" value="Settings"/></li>
                <li><h:form><p:commandLink action="#{indexBean.logout()}" value="Logout"/></h:form></li>
            </ul>
        </header>
        <section>
            <div style="width:1024px;margin:auto;">
                <h:form id="modifyeventform" class="clear-left" style="font-size:14px;">
                    <p:growl id="growl" life="3000"/>

                    <p:panel header="Change Event Info" visible="#{changeEventInfoBean.isCreator()}">
                        <p:panelGrid columns="3">

                            <p:outputLabel value="Event Name"/>
                            <p:inputText id="name" value="#{changeEventInfoBean.getCurrentEvent().name}" maxlength="200"/>
                            <p:outputLabel value=""/>

                            <p:outputLabel value="Description"/>
                            <p:inputTextarea id="description" value="#{changeEventInfoBean.getCurrentEvent().description}"
                                             rows="5" cols="30" counter="display" maxlength="100"
                                             counterTemplate="{0} characters remaining." autoResize="false"/>
                            <h:outputText id="display" />

                            <p:outputLabel value="Public"/>
                            <p:selectBooleanCheckbox value="#{changeEventInfoBean.getCurrentEvent().public}"/>
                            <p:outputLabel value=""/>

                            <p:outputLabel value="Outdoor"/>
                            <p:selectBooleanCheckbox value="#{changeEventInfoBean.getCurrentEvent().outdoor}"/>
                            <p:outputLabel value=""/>

                            <p:outputLabel value="Start time"/>
                            <p:calendar id="beginTime" value="#{changeEventInfoBean.getCurrentEvent().beginTime}"
                                        pages="3" effect="fold" mindate="#{homeScheduleBean.today()}"
                                        pattern="dd/MM/yyyy HH:mm"/>
                            <p:outputLabel value=""/>    

                            <p:outputLabel value="End time"/>
                            <p:calendar id="endTime" value="#{changeEventInfoBean.getCurrentEvent().endTime}"
                                        pages="3" effect="fold" mindate="#{homeScheduleBean.today()}"
                                        pattern="dd/MM/yyyy HH:mm"/>
                            <p:outputLabel value=""/>

                            <p:outputLabel value="Location (write as &quot;address, city, state&quot;) Please check your position!"
                                           style="display:block;width:300px;"/>
                            <p:inputText id="location" value="#{changeEventInfoBean.getCurrentEvent().location}" maxlength="200"/>
                            <p:commandButton value="Check" type="button" style="margin-left:60px;"
                                             onclick="myFunction()" icon="ui-icon-check"/>

                            <p:outputLabel value="Insert email of invited users separated by &quot;;&quot;" />
                            <p:inputTextarea value="#{changeEventInfoBean.invites}" rows="10" cols="50"
                                             completeMethod="#{changeEventInfoBean.complete}"
                                             queryDelay="500" minQueryLength="2"/>
                            <p:outputLabel value="Insert lower case Email address"/>

                            <p:outputLabel value=""/>
                            <p:commandButton value="Save Event"
                                             action="#{changeEventInfoBean.saveEvent()}"
                                             update="@all"
                                             ajax="true"
                                             onclick="loadingFunction()"
                                             style=""/>
                            <p:commandButton value="Delete Event" style="margin-left:45px;"
                                             action="#{changeEventInfoBean.deleteEvent()}"
                                             onclick="loadingFunction()"/>
                        </p:panelGrid>
                    </p:panel>
                </h:form>
                <p:dialog header="Google Map" widgetVar="gmap" modal="true" height="450">
                    <iframe
                        id="gmap"
                        width="600"
                        height="450"
                        frameborder="0" 
                        src="">
                    </iframe>
                </p:dialog>
                <h:graphicImage id="loadinggif" library="images" name="loading.gif" width="180px" height="90px"
                                    style="position:relative;left:422px;visibility:hidden"/>
            </div>
        </section>
    </h:body>
</html>
